<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    	<title>Pagination Demo III - Pagination with Ajax</title>
		<link rel="stylesheet" href="../pagination.css" />
		<link rel="stylesheet" href="demo.css" />
        <script type="text/javascript" src="lib/jquery-1.10.2.min.js"></script>
        <script type="text/javascript" src="../jquery.pagination.js"></script>
        
        <script type="text/javascript">
        
            // This demo shows how to paginate elements that were loaded via AJAX
            // It's very similar to the static demo.
        
            /**
             * Callback function that displays the content.
             *
             * Gets called every time the user clicks on a pagination link.
             *
             * @param {int}page_index New Page index
             * @param {jQuery} jq the container with the pagination links as a jQuery object
             */
			function pageselectCallback(page_index, jq){
                var new_content = $('#hiddenresult div.result:eq('+page_index+')').clone();
                $('#Searchresult').empty().append(new_content);
                return false;
            }
           
            /** 
             * Callback function for the AJAX content loader.
             */
            function initPagination() {
                var num_entries = $('#hiddenresult div.result').length;
                // Create pagination element
                $("#Pagination").pagination(num_entries, {
                    num_edge_entries: 2,
                    num_display_entries: 8,
                    callback: pageselectCallback,
                    items_per_page:1
                });
             }
                    
            // Load HTML snippet with AJAX and insert it into the Hiddenresult element
            // When the HTML has loaded, call initPagination to paginate the elements        
            $(document).ready(function(){      
                $('#hiddenresult').load('snippet.html', null, initPagination);
            });
            
            
            
        </script>
    </head>
    <body>
    	<h1>jQuery Pagination Plugin Demo</h1>
        <div id="Pagination"></div>
		<br style="clear:both;" />
		<div id="Searchresult">
			This content will be replaced when pagination inits.
		</div>
        
         <!-- Container element for all the Elements that are to be paginated -->
        <div id="hiddenresult" style="display:none;">
        
        </div>
        
		<div id="footer">
			Copyright &copy; 2008 by <a href="http://www.d-scribe.de/">describe europe Ltd.</a>.
		</div>
    </body>
</html>
